<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ingrid. the jQuery Datagrid</title>
<!-- this stylesheet is for page styling only -->
<style media="all" type="text/css">@import "css/site.css";</style>

<!-- include jquery lib -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- include ingrid lib -->
<script type="text/javascript" src="js/jquery.ingrid.js"></script>
<!-- ingrid default stylesheet -->
<style media="all" type="text/css">@import "css/ingrid.css";</style>
<!-- to make ingrid save her state (selected rows, page number, column sort & direction); just include the jQ cookie plugin -->
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<!-- initialize -->
<script type="text/javascript">
$(document).ready(
	function() {
		
		// create the grid
		// returns a jQ object with a 'g' property - that's ingrid
		var mygrid1 = $("#table1").ingrid({ 
										url: 'remote.php',
										height: 350,
										savedStateLoad: true,
										rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],
										onRowSelect: function(tr, selected){											
											var str 		= selected ? 'SELECTED' : 'UNSELECTED';
											var tr_html	= $(tr).html();											
											alert( str + ' Row. InnerHTML is : ' + tr_html);																						
										}										
									});
		

		$('#jump20').click(function(){
			// the 'g' object is ingrid - call methods like so:
			mygrid1.g.p.setPage(20)
		});
		
		$('#sel-rows').click(function(){
			// the 'g' object is ingrid - call methods like so:
			var rows = mygrid1.g.getSelectedRows();			
			for (i=0; i<rows.length; i++) {				
				var str = 'SELECTED ROW ' + i + " - InnerHTML is : \n";
				alert( str + $(rows[i]).html() );
			}			
		});
				
	}
); 
</script>
	
</head>
<body>

<h1>Ingrid, the jQuery Datagrid.</h1>

<div class="demo">
  <a href="example1.html">Example 1.</a>
  &nbsp;&nbsp;
  <a href="example2.html">Example 2.</a>
  &nbsp;&nbsp;
  <a href="example3.html">Example 3.</a>
</div>

<table id="table1">
  <thead>
    <tr>       
      <th>Col 0</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    <tr>
       <td>static col 1</td>
       <td>static col 2</td>
       <td>static col 3</td>
       <td>static col 4</td>
    </tr>
    </tbody>
</table>	

<br />
<a href="#" id="jump20">Jump to Page 20</a>  |  <a href="#" id="sel-rows">Get Selected Rows</a>

<hr />
	
<p>
Here's Ingrid with all the bells and whistles: 
<br />
&nbsp; - Resizable columns, Scrolling body, Paging Toolbar and Column Sorting (server-side).
<br />
&nbsp; - Saved State (navigate away from Ingrid, come back, and she reloads your last viewed page/sort/direction).  Uses jQ cookie plugin
<br />
&nbsp; - Row selection.  (Ingrid remembers this too.)
<br />
&nbsp; - Exposed object model with exposed helper methods (ingrid.load(), ingrid.getColumn(), ingrid.getRows(), ingrid.getSelectedRows(), etc)
<br />
&nbsp; - Custom row styling.
<br />
&nbsp; - Note: in all examples, we're loading data immediately after Ingrid inializes <br />
&nbsp; &nbsp; (this replaces the existing <code>&lt;tbody&gt;</code> that you'll see inline.
</p>

</body>
</html>